<script setup>
    import axios from 'axios';
import { ElMessage } from 'element-plus';
import { defineProps, ref, defineEmits } from 'vue';
    const props = defineProps(['title','content','type','date','file', 'id'])
    const emit = defineEmits(['refresh'])
    var showContent = ref(false)
    var rotationDegrees = ref(0)
    function changeShowContent(){
        showContent.value = !showContent.value
        rotationDegrees.value += 180;
    }
    const role = localStorage.getItem('role')
    function goToFile(){
        window.open(props.file,'_blank')
    }
    const deleteItem = async () => {
        dialogVisible.value = false
        try {
            const res = await axios({
                url: `/system/notice/${props.id}`,
                method: 'delete',
            })
            const {data, code, msg} = res.data
            if (code == 200) {
                ElMessage.success('删除成功')
                emit('refresh')
            } else {
                ElMessage.error(msg)
            }
        } catch (err) {
            ElMessage.error('操作失败')
        }
    }
    const dialogVisible = ref(false)
    
</script>

<template>
  <div class="bigBox">
    <!-- 本来该处应展示对应公告的接受者，但后端还没写，先简化 -->
    <view class="kind">{{type==1?"公告":type==2?"通知":"安全知识普及"}}</view>
    <view class="smallBox">
        <text class="title">{{title}}</text>
        <transition name="expand">
            <text v-if="showContent" class="content">{{content}}</text>
            
        </transition>
        <p id="link" @click="goToFile" v-if="showContent && props.file">点击跳转查看附件</p>
        
    </view>
    <div @click="changeShowContent"  class="changeShowContent"><svg :style="{ 'transform': `rotate(${rotationDegrees}deg)` }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M104.704 338.752a64 64 0 0 1 90.496 0l316.8 316.8 316.8-316.8a64 64 0 0 1 90.496 90.496L557.248 791.296a64 64 0 0 1-90.496 0L104.704 429.248a64 64 0 0 1 0-90.496z"></path></svg></div>
        <text class="time">{{date}}</text>
    <el-popover
        class="box-item"
        placement="bottom"
        :width="100"
        v-if="role == 1"
      >
      <div class="operaItem" @click="dialogVisible = true">
        删除
      </div>
        <template #reference>
            <span class="deleteBtn">...</span>
        </template>
      </el-popover>
  </div>
  <el-dialog
    v-model="dialogVisible"
    width="400"
    align-center
    >
    <span>是否删除</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteItem">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.bigBox{
    position: relative;
    width: 67%;
    max-width: 60vw;
    box-shadow: 0 4px 10px 2px rgba(102,102,102,.4);
    background-color: #fff;
    border-radius:25px;
    padding:45px 30px;
    padding-bottom: 7px;
    left: 50%;
    min-width: 400px;
    transform: translate(-50%,0);
    margin: 40px 0;
}
.changeShowContent > svg{
    width: 24px;
    height: 24px;
    margin-top: 20px;
    transition: transform 0.5s ease-in-out;
    transform: rotate(180deg);
}.changeShowContent{
    /* position: absolute; */
    margin-top: -2px;
}
.kind{
    position: absolute;
    top:0;
    left: 0;
    transform: translate(-50%,-50%);
    background-color: var(--el-color-primary);
    padding:5px 30px;
    color: #fff;
    font-weight: bold;
    border-radius: 20px;
}
.smallBox{
    display: flex;
    flex-direction: column;
}
.title{
    font-weight: 600;
    font-size: 22px;
    color: #000;
}
.deleteBtn {
    position: absolute;
    right: 60px;
    cursor: pointer;
    font-size: 19px;
    bottom: 20px;
}
.operaItem {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* width: 140px; */
}
.content{
    margin: 20px 0;
}
.time{
    position: absolute;
    top: 35px;
    right: 45px;
    color: #666666;
    font-size: 16px;
}
/* 进入过渡的开始状态 */
.expand-enter-from,
.expand-leave-to {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

/* 进入过渡的结束状态 */
.expand-enter-to,
.expand-leave-from {
  max-height: 500px; /* 假设内容的最大高度为500px，可根据实际情况调整 */
  opacity: 1;
}

/* 过渡的激活状态 */
.expand-enter-active,
.expand-leave-active {
  transition: opacity 0.4s ease-in-out,max-height 0.5s ease-in-out ;
  overflow: hidden;
}
#link{
    color: var(--el-color-primary);
    font-size: 18px;
    text-decoration: underline;
}
</style>